<template>
  <div class="photoinfo-container">
    <h3>{{ photoinfo.title }}</h3>
    <p class="subtitle">
      <span>发表时间：{{ photoinfo.add_time }}</span>
      <span>点击：{{ photoinfo.click }}次</span>
    </p>

    <hr>
    <div class="thumbs">
      <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="handleImage(index)" :key="item.src">
    </div>

    <!-- 图片内容区域 -->
    <div class="content" v-html="photoinfo.content"></div>

    <!-- 放置一个现成的 评论子组件 -->
    <!-- <cmt-box :id="id"></cmt-box> -->
  </div>

</template>

<script>
import { ImagePreview } from 'vant';
export default {
  data: () => ({
    id:"0",
    photoinfo:{},
    list:[]
  }),
  created(){
    this.id = this.$route.params.id;
    this.getPhotoInfo();
    this.getThumbs()
  },
  methods:{
    // 获取图片详细
    async getPhotoInfo() {
      const{
        body:{status,message}
      }=await this.$http.get(`api/getimageInfo/${this.id}`);
      if(status === 0){
        this.photoinfo = message;
      }
    },
    async getThumbs(){
    // 获取缩略图
    const{
      body:{status,message}
    } = await this.$http.get(`api/getthumimages/${this.id}`);
    if( status === 0){
      this.list = message;
      // consle.log(this.list);
    }
    },
    handleImage(index){
      let images = [];
      // 遍历需要过滤的图片
      console.log(index)
      this.list.forEach(item =>{
        if(item.src != null){
          images.push(item.src);
          // console.log(this.list)
        }
      });
      ImagePreview({
        images,
        startPosition:index
      });
    }
  }
};
</script>

<style lang="less" scoped>
// .photoinfo-container {
//   padding: 3px;
//   h3 {
//     color: #26a2ff;
//     font-size: 15px;
//     text-align: center;
//     margin: 15px 0;
//   }
//   .subtitle {
//     display: flex;
//     justify-content: space-between;
//     font-size: 13px;
//   }

//   .content {
//     font-size: 13px;
//     line-height: 30px;
//   }

//   .thumbs{
//     img{
//       margin: 10px;
//       box-shadow: 0 0 8px #999;
//     }
//   }
// }
</style>